import React from 'react';
import {Text, View, TouchableOpacity, TextInput, ScrollView} from "react-native";

import Style from '../../common/style'
import Title from "../component/title";

export default class HomePage extends React.Component {

    render() {

        const item = [
            {
                name: "Component",
                route: "component",
            },
            {
                name: "DrawerLayout",
                route: "drawerLayout",
            },
            {
                name: "DropDownList",
                route: "dropDown",
            },
            {
                name: "AsyncStorage",
                route: "storage",
            },
            {
                name: "Animated",
                route: "animated",
            },
            {
                name: "Setting",
                route: "setting",
            },
        ];

        return (
            <ScrollView>
                <View>
                    <Title title={'React Native Learn'} />

                    {
                        item.map((item, index) => {
                            return (
                                <TouchableOpacity key={index} style={[Style.button, {marginLeft: 10, marginRight: 10}]}
                                                  onPress={() => {
                                                      this.props.navigation.push(item.route)
                                                  }}>
                                    <Text>{item.name}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }

                    {/*<TouchableOpacity style={Style.button} onPress={() => {*/}
                    {/*    this.props.navigation.push('storage')*/}
                    {/*}}>*/}
                    {/*    <Text>*/}
                    {/*        AsyncStorage*/}
                    {/*    </Text>*/}
                    {/*</TouchableOpacity>*/}

                    {/*<TouchableOpacity style={Style.button} onPress={() => {*/}
                    {/*    this.props.navigation.push('setting')*/}
                    {/*}}>*/}
                    {/*    <Text>Setting</Text>*/}
                    {/*</TouchableOpacity>*/}
                </View>
            </ScrollView>
        )
    }

}
